<template>
  <view class="content">
    <van-nav-bar title="我的消息" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <van-notice-bar
      left-icon="volume-o"
      custom-class="notice-list"
      color="#FF8345"
      background="#FFF1E2"
      mode="link"
      text="马上开通微信通知服务，留言、动态实时通知"
    >
    </van-notice-bar>
    <Scrollbox className="message" @lowerFun="getList" :status="loadingStatus" :otherHeight="60">
      <template #contScrollBox>
        <van-cell custom-class="message-item" v-for="(item, index) in list" :key="index" :label="item.add_time">
          <view class="message-title" slot="title">
            <view class="title-info">
              {{ item.content }}
            </view>
          </view>
        </van-cell>
      </template>
    </Scrollbox>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue'
import Scrollbox from '@/components/scrollbox/index'
import { onShow } from '@dcloudio/uni-app'
import { getMessage } from '@/http/user'
export default {
  components: {
    Scrollbox,
  },
  setup() {
    const state = reactive({
      list: [],
      listQuery: {
        page: 1,
      },
      loadingStatus: 'loading',
      isEnd: false,
    })
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const getList = async () => {
      if (state.isEnd) return
      try {
        let data = await getMessage(state.listQuery)
        const { list, total_page } = data.data
        state.list = state.listQuery.page === 1 ? list : state.list.concat(list)

        if (list.length === 0 || total_page === state.listQuery.page) {
          state.loadingStatus = 'loadmore'
          state.isEnd = true
        } else {
          state.loadingStatus = 'loading'
          state.listQuery.page++
        }
      } catch (e) {
        state.isRefresh = false
        state.loading = false
      }
    }
    onShow(() => {
      state.listQuery.page = 1
      state.isEnd = false
      getList()
    })
    return {
      ...toRefs(state),
      onClickLeft,
      getList,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
}
</style>
